<template>

	<el-row class="container">
     <el-col :span="24" class="header">
        <el-col :span="8" class="logo"><img src='../../asset/images/hand.png'>
        {{sysName}}
        </el-col>
        <el-col :span="4"><span class="projectname">{{project.name}}</span></el-col>
        <el-col :span="4" class="userinfo">
          <el-dropdown trigger="hover">
              <span class="el-dropdown-link userinfo-inner">
                <i class="fa fa-user-circle-o"></i>&nbsp;&nbsp;{{name}}
              </span>
              <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>我的消息</el-dropdown-item>
              <el-dropdown-item @click.native="passwordButton">修改密码</el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
		</el-col>
		<el-col :span="24" class="main" >
       <el-dialog title="修改密码"  :visible.sync="passwordEditMe" :modal='false'>
        <el-form :model="editPasswordMe" :rules="rulesPassMe">
            <el-form-item label="原密码" prop="oldPassword" :label-width="formLabelWidth">
               <el-input v-model="editPasswordMe.oldPassword" placeholder="请输入原密码" type="password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword" :label-width="formLabelWidth">
                    <el-input v-model="editPasswordMe.newPassword" placeholder="请输入新密码"  type="password"></el-input>
               </el-form-item>
               <el-form-item label="重复新密码" prop="checknewpass1" :label-width="formLabelWidth">
              <el-input v-model="editPasswordMe.checknewpass1" placeholder="请再次输入新密码" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="">
                     <el-button @click="passwordEditMe = false">取消</el-button>
                    <el-button type="primary" v-if="buttonMePawd"  @click="submitEditPasswordMe">确定</el-button>
                </div>
      </el-dialog>
					<el-col :span="24" class="breadcrumb-container">
          <!-- 导航栏菜单开始 -->
      <el-col :span="24" class="main1">

          <div class="cloud-sidebar">
    <el-menu class="mian-bar el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router>
      <div class="narrow-wrapper" @click="changeUnfoldStatus(1)" v-if="!isCollapse">
        <i class="iconfont icon-zhankaianniuicon narrow-icon"></i>
      </div>
      <div class="unfold-wrapper" @click="changeUnfoldStatus(0)" v-else>
        <i class="iconfont icon-icon01 unfold-icon"></i>
      </div>
      <template  v-for="(item,index) in menu" v-if="!item.hidden">
        <el-menu-item :index="item.index"  :route="{ path:item.path, query: { projectId:projectId} }"  @click="men(index,item)" :key="item.index" >
            <i :class="item.iconCls"></i>
            <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>

    <div class="sub-bar" v-if="itemlist.subbar">
      <div class="sub-fold-wrapper" v-if="!isHideSubMenu" @click="hideSubMenu">
        <i class="iconfont icon-meunfold sub-fold-icon"></i>
      </div>
      <div class="sub-unfold-wrapper" v-else @click="hideSubMenu">
        <i class="iconfont icon-menuunfold sub-unfold-icon"></i>
      </div>
      <div class="sub-header-title">{{itemlist.name}}</div>

     <div class="sub-menu-list">
        <router-link  :to="{ path:item.path, query: { projectId:projectId} }" v-for="(item,index) in itemlist.menu2" class="sub-menu-item" :key="index" active-class="sub-menu-item-active">{{item.name}}</router-link>
      </div>
    </div>
   </div>

			<section class="content-container">

				<div class="h-w-100">
					<el-col :span="24" class="content-wrapper h-w-100" >
            <el-tooltip  class="item" effect="dark" content="关闭" placement="bottom">
                 <i class="el-icon-circle-close close" style="z-index:10001"  @click="presentation"></i>
            </el-tooltip>
						<transition name="fade" mode="out-in">
							<router-view>

              </router-view>
						</transition>
					</el-col>
			    	</div>
		    	</section>
		</el-col>
    <!-- 导航栏菜单结束 -->
				</el-col>

       
		</el-col>
	</el-row>
</template>

<script>
import { connect } from 'net';


export default {
  data() {
    var validatePass4 = (rule, value, callback) => {
      if(this.editPasswordMe.oldPassword === ""){
            callback(new Error("请输入原密码"));
          }else {
            callback();
          }
    };
    var validatePass3 = (rule, value, callback) => {
          if (value === "") {
            callback(new Error("请再次输入密码"));
          } else if (value !== this.editPasswordMe.newPassword) {
           callback(new Error("两次输入密码不一致!"));
           this.buttonMePawd = false
            } else {
            this.buttonMePawd = true
            callback();
          }
    };
    return {
      userIdentity:'',
      sysName: "山水林田湖草生态修复集成跟踪系统",
      name: "",
      listmenu: "北京地铁",
      controlShow: false,
      projectId: '',
      project:{},
      toindex:'',
      itemlist: {},
      isCollapse: true,
      isHideSubMenu: false,
      isShowMainMenu: false,
      formLabelWidth: "120px",
      passwordEditMe:false,
      buttonMePawd:false,
      token:'',
      menu:[
        {
          path: '/photo',
          query: {
            projectId:this.projectId
          },
          name: '图片管理 ',
          subbar: false,
          iconCls: 'fa fa-cubes',
          index: '1',
        },
        {
          path: '/project',
          name: '文件管理 ',
          subbar: false,
          iconCls: 'fa fa-object-group',
          index: '8',
        },
        {
          path: '/dayReport',
          name: '月报表',
          // subbar: true,
          subbar: false,
          iconCls: 'fa fa-file-text-o',
          index: '9',
        },
        {
          path: '/userAdd',
          name: '成员管理',
          hidden: false,
          subbar: true,
          iconCls: 'fa fa-cube',
          index:'10',
          menu2:[
             //{ path: '/projectMess', name: '项目信息 '},
            { path: '/userAdd', name: '添加用户 '},
            { path: '/projectUser', name: '项目成员 '}
          ]
        }
      ],
      rulesPassMe:{
        oldPassword:[
          {required: true, validator: validatePass4, trigger: "blur"}
        ],
        newPassword:[
          {required: true, message:"请输入新密码"}
        ],
        checknewpass1:[
          {required: true, validator: validatePass3, trigger: "blur"}
        ],
      },
      // 修改自身密码
      editPasswordMe:{
        oldPassword:'',
        newPassword:'',
        checknewpass1:'',
      },
    };
  },
  mounted() {
    this.token = sessionStorage.getItem("token")
     this.userModel.userToken(this.token).then(res => {
        if(res.status != 200){
          this.$confirm("登录超时，请重新登录", "提示", {
          type: "warning"
          }).then(() => {
            this.$router.push("/login")
          }).catch(() =>{
            this.$router.push("/login")
          })
        }else{
          this.name = res.data.name
          this.userIdentity = res.data.userIdentity.id;
          if (this.userIdentity == 3) {
            this.menu[9].hidden = true
          }
        }
      }).catch(err => {
        this.$router.push("/login")
        console.log(err.message)
      })


    this.projectId = this.$route.query.projectId
    //判断projectId是否有值，如果没有跳转/
    if(this.projectId === undefined){
      this.showCont()
    }

    // this.$router.push({path: '/projectUser',query: {projectId: this.projectId}})
    //  this.loginModel.checkInfo('bob',1).then(res => {
    //    ;
    //  }).catch(err => {
    //    console.log(err.message)
    //  })
    this.projectModel.getById(this.projectId).then(res => {

      this.project = res.data
    }).catch(err => {
      console.log(err.message)
    })
  },
  methods: {
    showCont(){
      this.$router.push("/");
    },
    presentation(){
     this.$router.push("/");
    },
    onSubmit() {
      console.log("submit!");
    },
     men(index,item){
      this.toindex = index,
      this.itemlist = item
    },
    changeUnfoldStatus(code) {
      if (code == 1) {
        this.isCollapse = true;
        sessionStorage.setItem("isUnfold", "1");
      } else {
        this.isCollapse = false;
        sessionStorage.setItem("isUnfold", "0");
      }
    },
    hideSubMenu() {
      let subbarObj = document.getElementsByClassName("sub-bar")[0];
      if (this.isHideSubMenu) {
        this.isHideSubMenu = false;
        subbarObj.style.width = "180px";
      } else {
        this.isHideSubMenu = true;
        subbarObj.style.width = "0px";
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //退出登录
    logout: function() {
      var _this = this;
      this.$confirm("确认退出吗?", "提示", {
        //type: 'warning'
      })
        .then(() => {
          this.loginModel.logout().then(res => {
            _this.$router.push("/login")
          }).catch(err => {
            console.log(err.message)
          })

        })
        .catch(() => {});
    },
    handleopen() {
      //console.log('handleopen');
    },
    handleclose() {
      //console.log('handleclose');
    },
    passwordButton(){
      this.passwordEditMe=true
    },
    //修改密码
    submitEditPasswordMe(){
       let dataPwd={
          type:1,
          oldPassword: this.editPasswordMe.oldPassword,
          newPassword: this.editPasswordMe.newPassword,
        }
        this.userModel.editPassword(dataPwd).then(res=>{
          console.log(res)
          if(res.status === 200){
            this.passwordEditMe=false
            this.$message({
                  type: "success",
                  message: res.msg
                });
          }else{
            this.$message({
                  type: "info",
                  message: res.msg
                });
          }
        }).catch(err =>{
          console.log(err.message)
        })
    },
  }
};
</script>
<style scoped lang="scss">
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background-color: #475669;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }

    .logo {
      height: 60px;
      font-size: 22px;
      padding-left: 20px;
      padding-right: 20px;
      border-color: rgba(238, 241, 146, 0.3);
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #ffffff;
      }
    }
    .logo-width {
      width: 400px;
    }
    .logo-collapse-width {
      width: 60px;
    }
  }
  .main {
    display: flex;
    // background: #324057;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow-y: auto;
    z-index: 10;
    aside {
      width: 180px;
      // position: absolute;
      // top: 0px;
      // bottom: 0px;
      .el-menu {
        height: 100%;
      }
      .collapsed {
        width: 60px;
        .item {
          position: relative;
        }
        .submenu {
          position: absolute;
          top: 0px;
          left: 60px;
          z-index: 99999;
          height: auto;
          display: none;
        }
      }
    }
    .menu-collapsed {
      flex: 0 0 60px;
      width: 60px;
    }
    .menu-expanded {
      width: 120px;
    }
    .content-container {
      flex: 1;
      overflow: hidden;
      // overflow-y: auto;
      padding: 0px;
      .breadcrumb-container {
        //margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        box-sizing: border-box;
      }
    }
  }
}
.cloud-sidebar {
  height: 100%;
  .mian-bar {
    float: left;
    height: 100%;
    background: #333744;
    .narrow-wrapper {
      width: 180px;
      height: 30px;
      background: #4a5064;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .narrow-icon {
        font-size: 12px;
        color: #aeafa7;
      }
    }
    .narrow-wrapper:hover .narrow-icon {
      color: #fff;
    }
    .unfold-wrapper {
      width: 64px;
      height: 30px;
      background: #4a5064;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .unfold-icon {
        font-size: 20px;
        color: #aeafa7;
      }
    }
    .unfold-wrapper:hover .unfold-icon {
      color: #fff;
    }
    .first-menu-wrapper {
      color: #fff;
      font-size: 12px;
      .item-menu-wrapper {
        .item-menu-title {
          display: flex;
          height: 40px;
          align-items: center;
          background: #42485b;
          cursor: pointer;
          img {
            margin-left: 18px;
            margin-right: 8px;
          }
        }
        .item-menu-title:hover {
          background: #00c1de;
        }
        .item-menu-list {
          .submenu {
            color: #aeb9c2;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            i {
              display: inline-block;
              width: 16px;
              height: 16px;
              margin: 0 17px;
            }
          }
          .submenu:hover {
            background: #4a5064;
          }
          .submenu-active {
            background: #00c1de;
            color: #fff;
          }
          .submenu-active:hover {
            background: #00c1de;
            color: #fff;
          }
        }
      }
    }
  }
  .sub-bar {
    float: left;
    width: 180px;
    height: 100%;
    transition: width 0.2s;
    background: #eaedf1;
    position: relative;
    .sub-fold-wrapper {
      width: 20px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #f7f7f7;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      margin: auto 0;
      border-radius: 15px 0px 0px 15px;
      .sub-fold-icon {
        font-size: 16px;
        color: #546478;
      }
    }
    .sub-unfold-wrapper {
      width: 20px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #d9dee4;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 2;
      margin: auto 0;
      border-radius: 0px 15px 15px 0px;
      .sub-unfold-icon {
        font-size: 16px;
        color: #546478;
      }
    }
    .sub-header-title {
      height: 70px;
      line-height: 70px;
      background: #d9dee4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 600;
      font-size: 12px;
      text-indent: 20px;
      box-sizing: border-box;
    }
    .sub-menu-list {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding-top: 70px;
      box-sizing: border-box;
      overflow-y: auto;
      .sub-menu-item {
        display: block;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-indent: 20px;
        color: #333;
        font-size: 12px;
      }
      .sub-menu-item:hover {
        background: #f4f6f8;
      }
       .sub-menu-item-active {
        background: #fff;
      }
      .sub-menu-item-active:hover {
        background: #fff;
      }
    }
  }
}
</style>
<style>
.el-menu {
  background-color: #475669;
}
.el-submenu .el-menu {
  background-color: #475669;
}
.el-menu1 {
  border-right: 2px solid #dfdbdb;
}
.l-menu .el-menu-item {
  color: #ffffff;
}
.el-menu-item,
.el-submenu__title {
  color: #ffffff;
}
.el-submenu .el-menu-item:hover,
.el-submenu__title:hover {
  background-color: #5d646d;
}
.input-css {
  margin-left: 10px;
  width: 100px;
}
.main1 {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0px;
  overflow: hidden;
  border-right: 1px solid #dfdbdb;
  z-index: 1;
}
.top-menu .el-menu-item {
  color: #dfdbdb;
}
.top-menu .is-active {
  color: #20a0ff;
}
.el-menu-item:hover {
  background-color: #d1dbe5;
}
.item {
  margin-top: 10px;
  margin-right: 10px;
}
.close {
  position: fixed;
  right: 0px;
}
.box {
  width: 400px;
}
.top {
  text-align: center;
}
.left {
  float: left;
  width: 60px;
}

.right {
  float: right;
  width: 60px;
}

.bottom {
  clear: both;
  text-align: center;
}

/*.item {*/
  /*margin-right: 10px;*/
/*}*/

.left .el-tooltip__popper,
.right .el-tooltip__popper {
  padding: 8px 10px;
}
.menu-list:not(.el-menu--collapse) {
  width: 140px;
  min-height: 200px;
}
.menu-list .el-menu-item {
  color: #ffffff;
}
.menu-list .is-active {
  color: #20a0ff;
}
.flexible {
  z-index: 11;
}
.flexible .el-radio-button__inner {
  background-color: transparent;
  border: 0px;
  color: #ffffff;
}
.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0;
}
.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0;
}
.search-box {
  width: 1300px;
  height: 700px;
}
.amap-demo {
  height: 300px;
}

.amap-demo {
  height: 300px;
}

.search-box {
  display: flex;
  left: 20px;
}

.amap-page-container {
  width: 1500px;
  height: 1000px;
  z-index: -10;
}
#panel {
  z-index: 0;
}
.h-w-100 {
  width: 100%;
  height: 100%;
}
.amap-overlays {
  z-index: 0;
}
.dg.a {
  margin-right: 45px;
}
.projectname {
  line-height: 80px;
}
.none {
  display: none;
}
.dg.main {
  margin-top: 70px;
  margin-right: 40px;
  z-index: 0;
}
/*#popup {*/
  /*margin-left: 140px;*/
/*}*/
.el-menu--horizontal > .el-menu-item.is-active {
  color: #20a0ff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
    min-height: 400px;
}
.content-container::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
</style>
